<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本列表</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="root">
        <!-- 遍历列表 -->
        <h2>人员列表</h2>
        <ul>
            <li v-for="(p, index) in persons" :key="p.id">
                {{p.name}} -- {{p.age}} -- {{index}}
            </li>
        </ul>
        <!-- 遍历对象 -->
        <h2>汽车信息</h2>
        <ul>
            <li v-for="(value, key, index) of car" :key="key">
                {{key}} -- {{value}} -- {{index}}
            </li>
        </ul>
        <!-- 遍历字符串 -->
        <h2>测试遍历字符串（用得少）</h2>
        <ul>
            <li v-for="(char,index) of str" :key="index">
                {{char}}-{{index}}
            </li>
        </ul>
        <!-- 遍历指定次数 -->
        <h2>测试遍历指定次数（用得少）</h2>
        <ul>
            <li v-for="(number,index) of 5" :key="index">
                {{index}}-{{number}}
            </li>
        </ul>
    </div>
</body>
<script type="text/javascript">
    const vm = new Vue({
        el: '#root',
        data: {
            persons: [
                {id:'001', name:'张三', age:18},
                {id:'002', name:'李四', age:19},
                {id:'003', name:'王五', age:20}
            ],
            car:{
                name:'奥迪A8',
                price:'70万',
                color:'黑色'
            },
            str:'hello'
        }
    })
</script>
</html>